var leftBtn = document.getElementById("leftBtn");
var rightBtn = document.getElementById("rightBtn");
var banner = document.getElementById("banner");
var pic = document.getElementById("pic");
var dot = document.getElementById("dot");
for (var i = 0; i < pic.children.length; i++) {
    var node = document.createElement("LI");
    node.index = i;
    dot.appendChild(node);
}
var copy = pic.children[0].cloneNode(true);
pic.appendChild(copy);
var width = parseInt(getStyle(pic.children[0], "width"));
var len = pic.children.length;
pic.style.width = width * len + "px";
var index = 0;
var t;
function move() {
    if(index == len) {
        pic.style.left = 0;
        index = 1;
    }
    if (index == -1) {
        pic.style.left = -(len - 1) * width + "px";
        index = len - 2;
    }
    left = -width * index;
    changeDots(index);
    animate(pic, {left, left}, function() {
        t = setTimeout(function () {
            index++;
            if (index == len) {
                pic.style.left = 0;
                index = 1;
            }
            move();
        }, 2000);
    });
}
move();
// 为按钮添加点击事件
dot.onclick = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    target = getTarget(target, "tagName", "LI", this);
    if (target) {
        clearTimeout(t);
        index = target.index;
        changeDots(index);
        move();
    }
}
// 左右按钮
leftBtn.onclick = function() {
    clearTimeout(t);
    index--;
    move();
}
rightBtn.onclick = function() {
    clearTimeout(t);
    index++;
    move();
}
// 改变按钮颜色
function changeDots(index) {
    if (index < 0) {
        index = len;
    }
    if (index == len - 1) {
        index = 0;
    }
    for (var i = 0; i < len - 1; i++) {
        dot.children[i].style.backgroundColor = "#fff";
    }
    dot.children[index].style.backgroundColor = "red";
}
/**
 * 查看ele对象的type属性
 * @param {元素对象} ele 
 * @param {属性} type 
 */
function getStyle(ele, type) {
    if (ele.currentStyle) {
        return ele.currentStyle[type];
    } else {
        return getComputedStyle(ele, null)[type];
    }
}
/**
 * 动画效果
 * @param {元素对象} el 
 * @param {结束条件} endObj 
 * @param {回调函数} cb 
 * @param {时间} time 
 */
function animate(el, endObj, cb, time) {
    time = time || 200;
    var startObj = {};
    var _startObj = {};
    var speedObj = {};
    for (var i in endObj) {
        startObj[i] = parseInt(getStyle(el, i));
        _startObj[i] = startObj[i];
        speedObj[i] = 16.7 * (endObj[i] - startObj[i]) / time;
    }
    var flag = false;
    clearInterval(el.t);
    el.t = setInterval(function() {
        for (var j in endObj) {
            startObj[j] += speedObj[j];
            if (_startObj[j] < endObj[j] ? startObj[j] >= endObj[j] : startObj[j] <= endObj[j]) {
                startObj[j] = endObj[j];
                clearInterval(el.t);
                flag = true;
            }
            if (j == "opacity") {
                el.style[j] = startObj[j];
            } else {
                el.style[j] = startObj[j] + "px";
            }
        }
        if (flag && cb) {
            cb();
        }
    }, 16.7);
}
/**
 * 找到attr属性为value的节点
 * @param {目标对象，鼠标点击对象} target 
 * @param {属性名} attr 
 * @param {属性值} value 
 * @param {结束条件} end 
 */
function getTarget(target, attr, value, end) {
    while (target != end) { //如果鼠标点击的是end，则直接结束
        if (target[attr] == value) { //如果点击的对象的attr属性值为value，则返回该对象
            return target;
        }
        target = target.parentNode; //否则查找其父节点
    }

}